import { PageContainer } from '@ant-design/pro-components';
import DevStatistics from './components/DevStatistics';
import TransactionStatistics from './components/TransactionStatistics';
import { Col, Row } from 'antd';
import DevFaultStatistics from './components/DevFaultStatistics';
import DevStatusStatistics from './components/DevStatusStatistics';

const Home: React.FC = () => {
  return (
    <PageContainer
      ghost
      header={{
        title: '',
        breadcrumb: {},
      }}
    >
      <Row
        gutter={[
          { xs: 8, sm: 16, md: 24, lg: 32 },
          { xs: 8, sm: 16, md: 24, lg: 32 },
        ]}
      >
        <Col xs={24} sm={24} md={24} lg={24} xl={8}>
          <DevStatistics />
        </Col>
        <Col xs={24} sm={24} md={24} lg={24} xl={16}>
          <DevFaultStatistics />
        </Col>
        <Col span={24}>
          <TransactionStatistics />
        </Col>
        <Col xs={24} sm={12} md={12} lg={12} xl={6}>
          <DevStatusStatistics type="service" />
        </Col>
        <Col xs={24} sm={12} md={12} lg={12} xl={6}>
          <DevStatusStatistics type="hardware" />
        </Col>
        <Col xs={24} sm={12} md={12} lg={12} xl={6}>
          <DevStatusStatistics type="resource" />
        </Col>
        <Col xs={24} sm={12} md={12} lg={12} xl={6}>
          <DevStatusStatistics type="network" />
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Home;
